<template>
	<view class="content">
		<!-- <text class="nr sign-rule">{{rules}}</text> -->
		<u-navbar title="我的钱包" :autoBack="true" :bgColor="transparent" :border-bottom="none"></u-navbar>
		<image src="https://cdn.zkjialan.com/img/user/accountBg.jpg" class="accountBg"></image>
		<view class="moneyBox">
			<text class="label">总资产(元)</text>
			<text class="user_money">
				{{walletData.user_earnings}}
			</text>
		</view>
		<view @click="goPage('/bundle/pages/user_withdraw/user_withdraw')" class="recharge-btn">
			提现
		</view>
		<view class="titleBox">
			<view class="line"></view>
			<text class="title">账户明细</text>
		</view>
		<scroll-view class="listBox" scroll-y="true"  @scrolltolower="getMore()">
			<view class="listItem" v-for="(item, index) in lists" :key="index" @click="toDetail(item.id)">
				<text class="listLabel">提现至{{item.type_desc}}</text>
				<text class="listTime">{{item.create_time}}</text>
				<text class="listNum">+{{item.money}}</text>
				<view class="flex row-between">
				    <template v-if="item.status == 1">
				        <view class="xs status_desc" style="color: #0CC267;">{{item.status_desc}}</view>
				    </template>
				    <template v-if="item.status == 2">
				        <view class="xs status_desc" style="color: #FF2C3C;">{{item.status_desc}}</view>
				    </template>
				    <template v-if="item.status == 3">
				        <view class="xs status_desc" style="color: #666;">{{item.status_desc}}</view>
				    </template>
				    <template v-if="item.status == 4">
				        <view class="xs status_desc" style="color: #FF2C3C;">{{item.status_desc}}</view>
				    </template>
				</view>
				<!-- <template >
				    <template>
				        <view class="xs" style="color: #FF2C3C;">审核提示：{{item.audit_remark}}</view>
				    </template>
				</template> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		apiWalletData
	} from "@/api/user.js";
	export default {
		data() {
			return {
				walletData: {
					user_money: '0.00', //总资产
					total_recharge_amount: '0.00', //累计充值
					total_order_amount: '0.00' //累计消费
				},
				page_no:1,
				lists:[]
			}
		},

		methods: {
			// 获取明细列表
			getMore() {
				this.page_no++;
				this.$request.get(`shopapi/withdraw/lists?page_no=${this.page_no}&page_size=15`).then(res => {
					this.lists.push(...res.data.data.lists);
				})
			},
			toDetail(id) {
			    this.$Router.push({
			        path: '/bundle/pages/withdraw_success/withdraw_success',
			        query: {
			            id: id,
			            type: true
			        }
			    })
			},
			// 获取钱包数据
			getWalletData() {
				apiWalletData().then(res => {
					this.walletData = res;
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		onShow() {
			this.$request.get(`shopapi/withdraw/lists?page_no=1&page_size=15`).then(res => {
				this.lists=res.data.data.lists;
			})
			this.getWalletData();
		}
	}
</script>

<style lang="scss">
	.listBox {
		position: relative;
		width: 670rpx;
		height: 50vh;
		margin-left: 40rpx;
		overflow-y: scroll;
		.listItem {
			position: relative;
			width: 670rpx;
			height: 180rpx;
			border-top: 1rpx solid #dcdcdc;
			.status_desc{
				position: absolute;
				font-size: 26rpx;
				font-family: 'ar';
				top: 110rpx;
				right: 0;
			}
			.listLabel{
				position: absolute;
				font-size: 26rpx;
				font-family: 'ar';
				top: 50rpx;
			}
			.listNum{
				position: absolute;
				font-size: 26rpx;
				font-family: 'ar';
				top: 50rpx;
				right: 0;
			}
			.listTime{
				position: absolute;
				font-size: 23rpx;
				font-family: 'ar';
				top: 110rpx;
				color: #8e8e8e;
			}
		}
	}

	.titleBox {
		position: relative;
		width: 100%;
		margin-top: 77rpx;
		display: flex;
		align-items: center;
		height: 28rpx;
		margin-bottom: 50rpx;

		.line {
			width: 5rpx;
			height: 28rpx;
			background-color: #f08329;
		}

		.title {
			font-size: 28rpx;
			font-family: 'am';
			margin-left: 35rpx;
		}
	}

	.recharge-btn {
		width: 340rpx;
		height: 90rpx;
		border-radius: 45rpx;
		color: #fff;
		background-color: #f08329;
		font-size: 28rpx;
		font-family: 'am';
		text-align: center;
		line-height: 90rpx;
		margin-left: 205rpx;
		margin-top: 30rpx;
		position: relative;
	}

	.label {
		position: relative;
		width: 100%;
		text-align: center;
		font-size: 23rpx;
		font-family: 'ar';
		margin-top: 50rpx;
		display: block;
	}



	.user_money {
		position: relative;
		display: block;
		width: 100%;
		text-align: center;
		font-size: 60rpx;
		font-family: 'ab';
		margin-top: 20rpx;
	}

	.moneyBox {
		position: relative;
		width: 670rpx;
		height: 230rpx;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		background-color: #fff;
		margin-left: 40rpx;
		/* z-index: 999; */
		border-radius: 15rpx;
		margin-top: 50rpx;
		overflow: hidden;
	}

	/deep/.u-icon__icon,
	.u-title {
		color: #000 !important;
	}

	/deep/ .u-navbar {
		background-color: transparent !important;
	}

	.accountBg {
		position: absolute;
		width: 100%;
		height: 1624rpx;
		top: 0;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background-color: #fff;
	}
</style>